<template>
  <div class="newslist w">
        <ul class="list">
            <li>
                <div class="title">
                    <h3>视频播放</h3>
                </div>
                <div class="image-video" v-for="(image,index) in imagesList" :key="index">
                    <a :href="image.url" target="_blank">
                        <img :src="image.pic" alt=""></a>
                    <p>{{image.pro}}</p>
                    <span class=" video_icon"></span>
                </div>

                <ul>
                    <li v-for="(item,index) in TextList" :key="index">
                        <a href="http://flv0.bn.netease.com/37823c306e88facc3ccb131a64b9b5d20e7ed634efb6d6814cff71bae1543a99fef4b04ce46b297ce4473b7292003a68e13fe0b99c6815233a0d206b0ee074d60bc9a56f21cdebf734905101b23963ac8e5601d3f45de8b827538453e375aae6e3fa1e77080a07b0b292fc3a1035740c9f9ffc31dfe03292.mp4"
                            target="_blank">{{ item.list }}
                        </a>
                    </li>
                </ul>
            </li>

            <li v-for="(pic,index) in ImageList" :key="index">
                <div class="title">
                    <h3>{{ pic.title }}</h3>
                </div>
                <div class="image-picture">
                    <a :href="pic.link" target="_blank">
                        <img :src="pic.img" alt=""></a>
                <p>{{ pic.abo }}</p>
                <span class=" video_icon"></span>
                </div>

                <ul>
                    <!-- <li v-for="(about,index) in aboutList" :key="index"> -->
                    <li v-for="(item,index) in pic.list" :key="index">
                        <a href="http://flv0.bn.netease.com/37823c306e88facc3ccb131a64b9b5d20e7ed634efb6d6814cff71bae1543a99fef4b04ce46b297ce4473b7292003a68e13fe0b99c6815233a0d206b0ee074d60bc9a56f21cdebf734905101b23963ac8e5601d3f45de8b827538453e375aae6e3fa1e77080a07b0b292fc3a1035740c9f9ffc31dfe03292.mp4"
                            target="_blank">{{ item.name }}
                        </a>
                    </li>
                </ul>
            </li>

            
        </ul>
    </div>
</template>

<script>
import fazhi from "./images/fazhi.png"
export default {
  name: "MyList",
  data() {
    return {
        ImageList:[
            {
                title:'乡村振兴',
                img:'http://www.zhuhai.gov.cn/img/0/42/42889/2548991.png',
                abo:'三板村获赠丝瓜玉米苗',
                link:'https://www.zhuhai.gov.cn/xw/xwzx/zhyw/content/post_2548991.html',
                list:[
                    {name:"以水“做文章” 发展“水文化”"},
                    {name:"优化营商环境 助力乡村振兴"},
                    {name:"走一条属于自己的幸福路"},
                    {name:"三板村与台南市五甲里“结亲”"},
                    {name:"推进乡村振兴 改善人居环境"},
                ]
            },
            {
                title:'脱贫攻坚',
                img:'https://pub-point.hizh.cn/images/202309/23/650e36bbbf08ca68bcde18f4.jpeg',
                abo:'珠海，和美乡村入画卷！',
                link:'https://pub-zhtb.hizh.cn/a/202309/23/AP650e36bce4b09289c21c8d87.html',
                list:[
                    {name:"全国首家乡村金融吧在金湾区三板村开张"},
                    {name:"金湾“百千万工程”施工图出炉"},
                    {name:"以“百千万工程”为抓手，珠海推动城乡融合发展"},
                    {name:"珠海加快打造宜居宜业现代化和美乡村"},
                    {name:"村均年收入超500万！"},
                ]
            },
            {
                title:'乡村文艺',
                img:'https://pub-point.hizh.cn/images/202309/26/65122e338bcb2f54e56f4c29.jpeg',
                abo:'2023年“中国农民丰收节”',
                link:'https://pub-zhtb.hizh.cn/a/202309/26/AP65122b86e4b0a12e0ce8e399.html',
                list:[
                    {name:"水乡版“速度与激情”！"},
                    {name:"三板特色农庄"},
                    {name:"活力金湾丨三板水乡赛龙舟"},
                    {name:"印象三板"},
                    {name:"粽子的滋味"},
                ]
            },
            {
                title:'法制文教',
                img:fazhi,
                abo:'藏在绘本故事中的法治教育',
                link:'http://gdzh.wenming.cn/1914/202307/t20230728_8191936.html',
                list:[
                    {name:"文旅新项目、小区大改造！"},
                    {name:"国字号荣誉，金湾＋1！"},
                    {name:"“民法典宣传月”活动 “典”燃学法热潮"},
                    {name:"红旗镇开展党史学习教育进农村专题讲座"},
                    {name:"金湾居民在 “大声公”里听故事学党史"},
                ]
            },
            {
                title:'民生百态',
                img:'https://pub-static.hizh.cn/images/202304/28/644b461b4b4b1336d4ab091e.jpeg',
                abo:'梁华坤：珠海“鸟叔”',
                link:'http://pub-static.hizh.cn/a/202304/28/AP644b461be4b0fe4f82057e98.html',
                list:[
                    {name:"拨开“蜘蛛网”，金湾区开展空中缆线整治行动"},
                    {name:"红旗镇建设356处垃圾分类投放站"},
                    {name:"在平凡的岗位上诠释着不平凡的责任与担当"},
                    {name:"金湾将“问题河”变身“生态河”"},
                    {name:"三板村“大喇叭”讲党史，真“声”动！"},
                ]
            },
        ],
        imagesList:[
            {
                pic:require('@/assets/images/pic1.png'),
                url:'https://mp.weixin.qq.com/s/2Z3NfYj3eszgSWagNTsCLw',
                pro:'千鸟翔集的岭南水乡'
            },
            {
                pic:require('@/assets/images/pic2.jpeg'),
                url:'https://media-cm.oss-cn-shenzhen.aliyuncs.com/media/20230925/3429271695639730314.mp4',
                pro:'中国农民丰收节'
            },
            {
                pic:require('@/assets/images/pic3.jpg'),
                url:'https://media-cm.oss-cn-shenzhen.aliyuncs.com/media/202308/4482381693481400006.mp4',
                pro:'以赛促学|“擂台赛”'
            },
            {
                pic:require('@/assets/images/pic4.png'),
                url:'https://vod2.oeeee.com/ee2a2030659e4bbbb5cf3d7e63da0418/8cc2754fd9f0f27c1bed96f7e3883bad-sd-nbv1.mp4',
                pro:'珠海文明主题《你的微笑》'
            }
        ],
        TextList:[
            {list:'“藏”在鱼塘里的农庄'},
            {list:'水网密布，水系绵长'},
            {list:'民法典相伴'},
            {list:'三板农庄 水乡文化'},
            {list:'珠海金湾三板村简介'},
        ]
    }
  },
};
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
    border: 0;
}

a:link,
a:visited {
    color: #222;
    text-decoration: none;
    transition: color 600ms;
}

a:hover {
    color: #e60012;
    text-decoration: none;
}

/* li {
    list-style: none;
} */
.w {
    width: 80%;
    margin: 0 auto;
}

.newslist{
    display: flex;
    // top: 550px;
    // left: 255px;
}

.newslist .list{
    float: left;
    // text-align: center;
    // position: relative;
    // margin-right: 30px;
}

.newslist .list > li{
    float: left;
    list-style: none;
    width: 40%;
    height: 600px;
    background-color: #fff;
    margin-right: 15px;
    margin-bottom: 15px;
    

    
}
.newslist .title{
    width: 100%;
    background: url(https://pic.sxncb.com/static/img/titleimg.jpg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;

    h3{
        font-size: 18px;
        font-weight: bolder;
        line-height: 25px;
        /* float: left; */
        margin-left: 30px;
    }

}
.newslist li ul {
    float: left;
    width: 100%;
    margin-top: 15px;
    margin-left: 10px;
}
.newslist li ul li {
    float: none;
    margin-bottom: 15px;
    margin-left: 20px;
}
.image-video{
    width: 50%;
    position: relative;
    float: left;

    img{
        width: 90%;
        margin: 10px 10px;
        height: 129px;
    }
}
.image-video p {
    width: 90%;
    float: left;
    position: absolute;
    bottom: 0;
    left: 0;
    line-height: 30px;
    background: #000;
    color: #fff;
    text-align: center;
    font-size: 14px;
    margin: 0 10px;
}

.image-picture{
    width: 100%;
    position: relative;
    float: left;

    img{
        width: 95%;
        height: 283px;
        margin: 10px;
    }

    p{
        width: 95%;
        float: left;
        position: absolute;
        bottom: 0;
        left: 0;
        line-height: 30px;
        background: #000;
        color: #fff;
        text-align: center;
        font-size: 14px;
        margin: 0 10px;
    }
}
</style>

